<template>
  <div class="buttons">
    <div class="line">
      <div class="input">
        <div class="text">有效月份</div>
        <a-input-number v-model="month" mode="button" class="input-demo" />
      </div>
      <div class="input">
        <div class="text">数量</div>
        <a-input-number v-model="inNum" mode="button" class="input-demo" />
      </div>
      <a-button @click="add">入库</a-button>
    </div>

    <div class="line">
      <div class="input">
        <div class="text">数量</div>
        <a-input-number v-model="outNum" mode="button" class="input-demo" />
      </div>
      <a-button @click="remove" type="danger">出库</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { addMedicine, removeMedicine } from "@/apis/oldman";
import { Message } from "@arco-design/web-vue";

const props = defineProps<{ item: any; refresh: () => void }>();

const inNum = ref(0);
const outNum = ref(0);
const month = ref(0);

const add = async () => {
  const res = await addMedicine({
    medicineName: props.item?.medicineName,
    medicineNumber: inNum.value,
    month: month.value,
  });
  if (res.data.code === 200) {
    inNum.value = 0;
    month.value = 0;
    props.refresh?.();
    Message.success("入库成功");
  }
};

const remove = async () => {
  const res = await removeMedicine({
    medicineName: props.item?.medicineName,
    medicineNumber: outNum.value,
  });

  if (res.data.code === 200) {
    outNum.value = 0;
    Message.success("出库成功");
    props.refresh?.();
  }
};
</script>

<style scoped>
.buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.line {
  display: flex;
  gap: 4px;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.input {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex: 1;
}
.text {
  font-size: 14px;
  padding: 0 4px 0 0;
  white-space: nowrap;
}
</style>
